<template>
  <view class='Footer-container' :style="{
    height: (topBar.navbarHeight+10)+'px'
  }">
    <view :class="['btn nav left', index!==0?'can':'']" @click="toPrevQuestion">上一题</view>
    <view :class="['btn nav right', index!==max-1?'can':'']" @click="toNextQuestion">下一题</view>

    <view class="panel-center" @click="showAnswerPanel">
      <text class="panel-text">{{ index + 1 }}/{{ max }}</text>
      <image src="../../static/problem_shang.png" mode="aspectFit"
             style="width: 24upx; height: 12upx;margin-left: 16upx;"></image>
    </view>
    <image src="../../static/zhengque@3x.png" class="num_icon left"></image>
    <text style="color:#3073F6 ;align-self:center;">{{ correctNum }}</text>
    <image src="../../static/icon_error@3x.png" class="num_icon"></image>
    <text style="color:#FB3C3D ;align-self:center;">{{ errorNum }}</text>
    <view class="f1"></view>
    <view class="process-container">
      <view class="status-collection" @click="onCollect">
        <image v-if="isCollected" src="@/static/collection_select.png" class="icon"></image>
        <image v-else src="@/static/collection@2x.png" class="icon"></image>
        <text :class="['collectionColor',isCollected ? 'collectionColorSelect' :'']">
          {{ isCollected ? '已收藏' : '收藏' }}
        </text>
      </view>

      <view v-if="type === 'wrong'" class="status-collection" @click="onRemove">
        <image src="@/static/yichucuoti@2x.png" class="icon"></image>
        <text class="collectionColor">
          移出错题
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import questionCache from "@/libs/questionCache";

export default {
  name: 'Footer',
  props: ['storeId', 'type'],
  data() {
    return {
      index: 0,
      max: 0,
      correctNum: 0,
      errorNum: 0,
      question: null
    }
  },
  computed: {
    ...mapGetters(['questionSetting', 'topBar']),
    isCollected() {
      if (this.question) {
        return this.question.collect
      }
      return false
    }
  },
  mounted() {
    questionCache.getStore(this.storeId).subscribe('initList', this.setData)
    questionCache.getStore(this.storeId).subscribe('refreshQuestion', this.refreshQuestion)
    questionCache.getStore(this.storeId).subscribe('changeIndex', this.changeIndex)
    questionCache.getStore(this.storeId).subscribe('answer', ({id, index, status}) => {
      if (status === 1) {
        this.correctNum++
      } else {
        this.errorNum++
      }
      if (status === 1 && this.questionSetting.trueNext) {
        setTimeout(() => {
          this.toNextQuestion()
        }, 500)
      }
    })
  },

  methods: {
    ...mapActions('question', ['questionInfo', 'questionCollect', 'questionUncollect']),

    setData({index, list}) {
      this.init = true
      this.index = index
      this.max = list.length
      list.map(item => {
        if (item.status) {
          if (item.status > 0) {
            this.correctNum++
          } else {
            this.errorNum++
          }
        }
        // console.log(item.status, item.result)
      })
    },

    changeIndex(index) {
      this.index = index
      this.question = questionCache.getStore(this.storeId).getCurrentQuestion()
      console.log('this.question', this.question)
    },
    toPrevQuestion() {
      console.log('toPrevQuestion', this.index > 0)
      if (this.index > 0) {
        questionCache.getStore(this.storeId).changeIndex(this.index - 1)
      }
    },
    refreshQuestion() {
      this.question = questionCache.getStore(this.storeId).getCurrentQuestion()
    },
    showAnswerPanel() {
      this.$emit('showAnswerPanel')
    },
    toNextQuestion() {
      console.log('toNextQuestion', this.index + 1 < this.max)
      if (this.index + 1 < this.max) {
        questionCache.getStore(this.storeId).changeIndex(this.index + 1)
      } else {
        uni.showToast({
          title: '已是最后一道题',
          icon: 'none',
          duration: 2000
        })
      }
    },
    async onCollect() {
      if(!this.question) {
        return
      }
      if (this.question.collect) {
        await this.questionUncollect(this.question)
      } else {
        await this.questionCollect(this.question)
      }
      this.question.collect = !this.question.collect;
      questionCache.getStore(this.storeId).setQuestion(this.index, this.question)
    },
    onRemove() {
      if(!this.question) {
        return
      }
      questionCache.getStore(this.storeId).publish('showRemoveErrorBookDialog', {
        id: this.question.id,
        index: this.index
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.Footer-container {
  display: flex;
  font-size: 30upx;
  border-top: 1px solid #e9e9e9;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0 20rpx;
  //padding-bottom: env(safe-area-inset-bottom);
  .btn {
    height: 100%;
    padding: 0 20upx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;

    &.nav {
      position: fixed;
      bottom: 160rpx;
      background-color: #fff;
      box-shadow: 0 2px 10px #0000001a;
      height: 80rpx;
      border-radius: 20rpx;
      padding: 0 50rpx;

      &.left {
        left: 30rpx;
      }

      &.right {
        right: 30rpx;
      }
    }

    &.can {
      color: #1f1f1f;
    }
  }

  .num_icon {
    width: 30upx;
    height: 30upx;
    align-self: center;
    margin-right: 20upx;
    margin-left: 30upx;
    &.left {
      margin-left: 10rpx;
    }
  }

  .panel-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20upx;

    .panel-text {
      font-size: 14px;
    }
  }

  .process-container {
    display: flex;

    .status-collection {
      display: flex;
      align-items: center;
      font-size: 14px;
      padding: 0 30rpx;
      justify-content: center;

      .icon {
        width: 42rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      .collectionColor {
        color: #666;
      }

      .collectionColorSelect {
        color: #10D0B1;
      }
    }
  }
}
</style>
